<template>
  <el-dialog :title="name" :visible.sync="open" width="500px" append-to-body>
    <el-input v-model="input" :placeholder="$t('please_enter',{name:''})"></el-input>
    <div
      class="departcon"
      style="margin-top: 20px; display: flex; justify-content: flex-end"
    >
      <el-button size="small" @click="handlecancel">{{$t('cancel')}}</el-button>
      <el-button type="primary" size="small" @click="handleConfirm"
        >{{$t('confirm')}}</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { updateDept, addDept } from "@/api/custom/employerList";
export default {
  data() {
    return {
      open: false,
      input: "",
      name: "",
      info: {},
    };
  },
  created() {},
  methods: {
    handlenames(sign) {
      debugger;
      this.open = true;
      this.name = sign.topTitle;
      if (sign && sign.topTitle == this.$t('add_sub_department')) {
        this.input = "";
        this.info = sign;
      } else {
        this.info = sign;
        this.input = sign.label;
      }
    },
    handlecancel() {
      this.open = false;
    },
    handleConfirm() {
      this.open = false;
      if (this.name == this.$t('modify_department_name')) {
        updateDept({
          deptName: this.input,
          id: this.info.id,
          employerId: this.info.employerId,
        }).then((res) => {
          this.$modal.msgSuccess(this.$t('operation_successful'));
          this.$emit("handleSuccess");
        });
      }
      if (this.name == this.$t('add_sub_department')) {
        addDept({
          deptName: this.input,
          parentId: this.info.id,
          employerId: this.info.employerId,
        }).then((res) => {
          this.$modal.msgSuccess(this.$t('operation_successful'));
          this.$emit("handleSuccess");
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
